let utils = require('../../../../../utils/util.js');
import WeCropper from '../../../../../component/we-cropper/we-cropper.js'
const device = wx.getSystemInfoSync()
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
const height = device.windowHeight
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		cardId: '',
		cardTemplateType: 1,
		defaultSrc: 'http://ii.sinelinked.com/miniProgramAssets/bg2.png',
		tpl_data: [{
				choose: false,
				icon: 'http://ii.sinelinked.com/miniProgramAssets/choose.png',
				src: 'http://ii.sinelinked.com/miniProgramAssets/tpl_01.jpg',
				defaultSrc: 'http://ii.sinelinked.com/miniProgramAssets/bg1.jpg',
				cardTemplateType: 1
			},
			{
				choose: false,
				icon: 'http://ii.sinelinked.com/miniProgramAssets/choose.png',
				src: 'http://ii.sinelinked.com/miniProgramAssets/tpl_02.jpg',
				defaultSrc: 'http://ii.sinelinked.com/miniProgramAssets/bg2.jpg',
				cardTemplateType: 2
			},
			{
				choose: false,
				icon: 'http://ii.sinelinked.com/miniProgramAssets/choose.png',
				src: 'http://ii.sinelinked.com/miniProgramAssets/tpl_03.jpg',
				defaultSrc: 'http://ii.sinelinked.com/miniProgramAssets/bg3.jpg',
				cardTemplateType: 3
			}
		],
		showCropper: true,
		cropperOpt: {
			id: 'cropper',
			targetId: 'targetCropper',
			pixelRatio: device.pixelRatio,
			width: width,
			height: height,
			scale: 2.5,
			zoom: 8,
			cut: {
				x: (width - 320) / 2, // 裁剪框x轴起点
				y: (height - 438) / 2, // 裁剪框y轴期起点
				width: 320, // 裁剪框宽度
				height: 438 // 裁剪框高度
			}
		}
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function(options) {
		var cardId = options.cardId
		if (cardId) {
			this.setData({
				cardId: cardId,
			})
			this.cardByInfoType(cardId)
		}

		const {
			cropperOpt
		} = this.data

		this.cropper = new WeCropper(cropperOpt)
			.on('ready', function(ctx) {
				console.log(`wecropper is ready for work!`)
			})
			.on('beforeImageLoad', (ctx) => {
				console.log(`before picture loaded, i can do something`)
				console.log(`current canvas context:`, ctx)
				wx.showToast({
					title: '上传中',
					icon: 'loading',
					duration: 20000
				})
			})
			.on('imageLoad', (ctx) => {
				console.log(`picture loaded`)
				console.log(`current canvas context:`, ctx)
				wx.hideToast()
			})


	},
	// 获取名片信息
	cardByInfoType(cardId) {
		var data = {
			id: cardId,
			infoType: 7
		}
		utils.request(utils.personApi + '/personal/get/cardByInfoType', 'GET', data)
			.then(res => {
				if (res.code == 0) {
					var cardTemplateType = parseInt(res.data.info.cardTemplateType)
					var tpl_data = this.data.tpl_data
					var tpl_data_tmp = tpl_data.map(item => {
						item.choose = false
						item.icon = 'http://ii.sinelinked.com/miniProgramAssets/choose.png'
						if (item.cardTemplateType == cardTemplateType) {
							item.choose = true
							item.icon = 'http://ii.sinelinked.com/miniProgramAssets/choose_fill.png'
						}
						return item
					})
					this.setData({
						// defaultSrc: tpl_data[cardTemplateType - 1].defaultSrc,
						defaultSrc:res.data.info.cardTemplateBackUrl,
						cardTemplateType,
						tpl_data: tpl_data_tmp
					})
				}
			})
	},
	/* 选择模板 */
	chooseTplHandle(e) {
		var cardTemplateType = e.currentTarget.dataset.cardtemplatetype || this.data.cardTemplateType
		var data = {
			id: this.data.cardId,
			cardTemplateType,
			cardTemplateBackUrl: ''
		}
		wx.showLoading({
		  title: '加载中',
		})
		utils.request(utils.personApi + '/personal/update/card/template', 'POST', data, 'application/x-www-form-urlencoded')
			.then(res => {
				if (res.code == 0) {
					this.cardByInfoType(this.data.cardId)
					wx.hideLoading()
				}
			})
	},
	showCropperHandle() {
		this.setData({
			showCropper: false
		})
	},
	cancleCropperHandle() {
		this.setData({
			showCropper: true
		})
	},
	touchStart(e) {
		this.cropper.touchStart(e)
	},
	touchMove(e) {
		this.cropper.touchMove(e)
	},
	touchEnd(e) {
		this.cropper.touchEnd(e)
	},
	getCropperImage() {
		this.cropper.getCropperImage((src) => {
			if (src) {
				var data = {
					id: this.data.cardId,
					cardTemplateType:this.data.cardTemplateType,
					cardTemplateBackUrl:''
				}
				wx.uploadFile({
					url: 'https://www.tcrunner.com/UniversalCards/apiPersonal/personal/update/card/template', // 仅为示例，非真实的接口地址
					header: {
						'cookie': "_auth=" + wx.getStorageSync('_auth'),
					},
					filePath: src,
					name: 'templateBackImage',
					formData: data,
					success(res) {
						const data = res.data
						// do something
						console.log(res);
					}
				})
				this.setData({
					defaultSrc: src,
					showCropper: true
				})
			} else {
				console.log('获取图片地址失败，请稍后重试')
			}
		})
	},
	uploadTap() {
		const self = this
    console.log('uploadTap')
		wx.chooseImage({
			count: 1, // 默认9
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			success(res) {
				const src = res.tempFilePaths[0]

				self.cropper.pushOrign(src)
			}
		})
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {

	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function() {

	},

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {

	},

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {

	},

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {

	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {

	},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {

	}
})
